<template>
    <view>
        <van-tabs swipeable>
            <van-tab title="全部">
                <block v-if="list">
                    <view class="padding-sm f margin-tb-sm bg-white" v-for="(item, index) in list" :key="index">
                        <image class="width_3 margin-right-lg" style="height: 150rpx" :src="item.img"></image>

                        <view class="f1 f fv fpj">
                            <view class="f1 f fpj">
                                <view class="f1 text-xl text-black">{{ item.name }}</view>
                                <van-tag v-if="index == 0" type="success" size="large">交易完成</van-tag>
                                <van-tag v-else type="warning" size="large">待收货</van-tag>
                            </view>
                            <view class="width_1 f fac fpj">
                                <view class="text-price text-xl text-black f fac">
                                    {{ item.price }}
                                    <view class="margin-left-sm">x{{ item.buyNum }}</view>
                                </view>
                                <van-button color="red" plain size="small" @tap.native="showWlFun">查看物流</van-button>
                            </view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <image src="../../../static/image/notfound.png" style="width: 80%; height: 140px" mode="widthFix"></image>
                </block>
            </van-tab>
            <van-tab title="待完成"><image src="/static/image/notfound.png" style="width: 80%; height: 140px" mode="widthFix"></image></van-tab>
            <van-tab title="已完成">
                <block v-if="list">
                    <view class="padding-sm f margin-tb-sm bg-white" v-for="(item, index) in list" :key="index">
                        <image class="width_3 margin-right-lg" style="height: 150rpx" :src="item.img"></image>

                        <view class="f1 f fv fpj">
                            <view class="f1 f fpj">
                                <view class="f1 text-xl text-black">{{ item.name }}</view>
                                <van-tag v-if="index == 0" type="success" size="large">交易完成</van-tag>
                                <van-tag v-else type="warning" size="large">待收货</van-tag>
                            </view>
                            <view class="width_1 f fac fpj">
                                <view class="text-price text-xl text-black f fac margin-right-sm">
                                    {{ item.price }}
                                    <view class="margin-left-sm">x{{ item.buyNum }}</view>
                                </view>
                                <van-button color="red" plain size="small" @tap.native="showWlFun">查看物流</van-button>
                            </view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <image src="/static/image/notfound.png" style="width: 80%; height: 140px" mode="widthFix"></image>
                </block>
            </van-tab>
        </van-tabs>
        <van-popup :show="showWl" position="left" custom-style="height: 100%;width: 550rpx;" @close="showWlFun">
            <van-steps :steps="steps" :active="active" direction="vertical" active-color="#ee0a24" desc-class="width: 550rpx;" />
        </van-popup>
    </view>
</template>

<script>
// page/cloud/index.js
export default {
    data() {
        return {
            list: [],
            total: 0,
            addressInfo: {},
            showWl: false,
            steps: [
                {
                    text: '已发货',
                    desc: '2024-05-20 08:00:00',
                    inactiveIcon: 'location-o',
                    activeIcon: 'success'
                },
                {
                    text: '[运输中] 已到达地点1',
                    desc: '2024-05-21 08:00:00',
                    inactiveIcon: 'location-o',
                    activeIcon: 'plus'
                },
                {
                    text: '[运输中] 已到达地点3',
                    desc: '2024-05-21 18:00:00',
                    inactiveIcon: 'location-o',
                    activeIcon: 'cross'
                },
                {
                    text: '[已收货] 物品已签收，交易完成',
                    desc: '2024-05-22 18:00:00',
                    inactiveIcon: 'location-o',
                    activeIcon: 'passed'
                }
            ],
            active: 3
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow(e) {
		this.list = uni.getStorageSync('orders')
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        showWlFun() {
			this.showWl = !this.showWl
        },

        toAddress() {
            uni.navigateTo({
                url: '../address/index?total='
            });
        },
    }
};
</script>
<style>
/* @import './index.css'; */
</style>
